// 创建元素
let _c = ele => document.createElement(ele);
// 获取元素
let $ = ele => document.querySelector(ele);

let num = 0;
let main = $('#main');
let mainBottom = $('.main-bottom');
let preButton = mainBottom.children[0];
let nextButton = mainBottom.children[2];
let select = $('select');
let options = $('select').children;
let getTop = $('.footer-top ul').children[2].children[0]
// 此数组是用来存放页数的
let arr = [];

// 加载中
let span = $("header span")
// 在页面未加载完毕之前显示的loading Html自定义内容
let before = $('header span::before');
//监听加载状态改变
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading() {
    if (document.readyState == "complete") {
        span.parentNode.removeChild(span);
    }
}

// 封装一个渲染商品列表的函数
function renderPro(currentArr) {
    let html = '';
    currentArr.forEach(item => {
        html += `<a class="main-top">
        <b>${item.productId}</b>
        <div>${item.productImg2}</div>
        <div class="main-top-right">
            <div class="main-top-right-top">${item.productName}<span> ${item.productPinkage}</span></div>
            <div class="main-top-right-bottom">
                <div>${item.productFrom}</div>
                <span>|&nbsp;${item.productTime}</span>
                <span class="comment">${item.productComCount.replace('人评论', '').replace('有', "")}</span>
                <div class="iconfont icon-pinglun"></div>
            </div>
        </div>
    </a>`
    })
    return html;
}

// 封装一个渲染 获取第几页 的函数
function renderOptions(arr) {
    // 创建下拉列表
    for (let i = 0; i < arr.length; i++) {
        let option = _c('option');
        option.innerText = i + 1 + '/' + arr.length;
        select.appendChild(option);
    }
    return
}

// 封装请求数据并且渲染的函数
// 形参：num  ---  控制pageid
// 默认值   0
function getData(num = 0) {
    // 请求数据
    const getProducts = () =>
        ajax({
            url: 'http://chst.vip:1234/api/getmoneyctrl',
            data: { pageid: num }
        });
    getProducts().then((res) => {
        // 渲染商品列表
        let products = res.result;
        main.innerHTML = renderPro(products);
        // 渲染options
        if (JSON.stringify(arr) === '[]') {
            for (let i = 1; i < Math.ceil(res.totalCount / 10) + 1; i++) {
                arr.push(i);
            }
            renderOptions(arr);
            // console.log(arr);
        }
        main.appendChild(mainBottom)
        // main.children.length - 1  是因为最后一个孩子节点是main-bottom，不是商品列表的内容
        for (let i = 0; i < main.children.length - 1; i++) {
            main.children[i].onclick = function () {
                // 利用浏览器本地存储进行页面之间值的传递
                // localStorage传入的值 key => value 必须是字符串
                let productId = this.children[0].innerText.toString();
                localStorage.setItem('proId', productId);
                location.href = "discount.html";
            }
        }
    })
}

// 首次渲染页面
getData()
// 一开始页面就是在第一页显示，因此要把上一页的按钮禁用掉
preButton.disabled = true;
// 封装下拉菜单的事件
select.onchange = function () {
    num = parseInt(select.value);
    // 实现按钮禁用
    if (num > 1 && num < options.length) {
        preButton.disabled = false;
        nextButton.disabled = false;
    } else if (num <= 1) {
        preButton.disabled = true;
        nextButton.disabled = false;
    } else {
        preButton.disabled = false;
        nextButton.disabled = true;
    }
    getData(num - 1);
    document.documentElement.scrollTop = 0;
}

// 封装上一页函数
preButton.onclick = function () {
    num = parseInt(select.value);
    // 实现按钮禁用
    if (num <= 2) {
        preButton.disabled = true;
        nextButton.disabled = false;
    } else {
        preButton.disabled = false;
        nextButton.disabled = false;
    }
    num -= 1;
    getData(num - 1);
    options[num - 1].selected = true;
    document.documentElement.scrollTop = 0;
}

// 封装下一页函数
nextButton.onclick = function () {
    num = parseInt(select.value);
    // 实现按钮禁用
    if (num >= options.length - 1) {
        preButton.disabled = false;
        nextButton.disabled = true;
    } else {
        preButton.disabled = false;
        nextButton.disabled = false;
    }
    num += 1;
    getData(num - 1);
    options[num - 1].selected = true;
    document.documentElement.scrollTop = 0;
}

// 返回顶部
getTop.onclick = function (e) {
    // 阻止默认事件
    e.preventDefault();
    let distans = document.documentElement.scrollTop;
    let distansControl = setInterval(function () {
        distans -= 10;
        document.documentElement.scrollTop = distans;
        if (distans <= 0) {
            clearInterval(distansControl);
        }
    }, 3)
}
